<%@page import="java.util.UUID"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
<%
    String uuid = UUID.randomUUID().toString();
    request.setAttribute("uuid", uuid);
%>
<div class="modal-body">
	<div style="height: 100%;">
		<div class="nav-tabs-custom">
    		<ul class="nav nav-tabs" role="tablist">
	    		<li class="active">
	    			<a href="#KBMSInfo_${uuid }" role="tab" data-toggle="tab">
	    			<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>知识详情
	    			</a>
	    		</li>
	    		<li>
	    			<a href="#KBMSAction_${uuid }" role="tab" data-toggle="tab">
	    			<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>流转记录
	    			</a>
	    		</li>
	    	</ul>
	    	<div class="tab-content">
	    		<div role="tabpanel" class="tab-pane active" id="KBMSInfo_${uuid}">
			    	<div class="box-body">
			    		<table class="table">
							<tbody>
								<tr>
									<td width="120px" align="right">主题：</td>
									<td>
										<div class="pull-left" style="width: 95%;">
											${entity.title }
										</div>
										<div class="pull-right">
											<c:choose>
							    				<c:when test="${ isCollection eq 'true' }">
									    			<a href="javascript:removeCollection('${entity.id }');" id="collectionBtn_${uuid}" title='点击取消收藏' class="glyphicon glyphicon-star" style="font-size: 18px;"></a>
							    				</c:when>
							    				<c:otherwise>
									    			<a href="javascript:addCollection('${entity.id }');" id="collectionBtn_${uuid}" title='点击加入收藏' class="glyphicon glyphicon-star-empty" style="font-size: 18px;"></a>
							    				</c:otherwise>
							    			</c:choose>
										</div>
									</td>
								</tr>
								<c:if test="${!empty entity.issueUserName}">
								<tr>
									<td align="right">发布用户：</td>
									<td>${entity.issueUserName }</td>
								</tr>
								</c:if>
								<c:if test="${!empty entity.issueTimeStr}">
								<tr>
									<td align="right">发布时间：</td>
									<td>${entity.issueTimeStr }</td>
								</tr>
								</c:if>
								<c:if test="${!empty entity.keywork}">
								<tr>
									<td align="right">关键词：</td>
									<td>${entity.keywork }</td>
								</tr>
								</c:if>
								<tr>
									<td colspan="2">${entity.contentStr }</td>
								</tr>
							</tbody>
						</table>
						<div>
							<ul class="nav nav-tabs" role="tablist"></ul>
							<div class="tab-content am-margin-vertical-sm"></div>
						</div>
						<div class="navbar navbar-default">
							<form id="KBMSCommentForm_${uuid}">
							<input type="hidden" name="kid" value="${entity.id }" />
							<input type="hidden" name="pid" value="-1" />
							<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 5px;">
								<tbody>
									<tr style="height: 60px;">
										<td align="right" width="100px">发表评论：</td>
										<td><textarea name="content" style="width:100%;height: 60px;"></textarea></td>
										<td align="center" width="80px">
											<button id="commentFormSubmit_${uuid }" type="button" class="btn btn-primary navbar-btn">发表</button>
										</td>
									</tr>
								</tbody>
							</table>
							</form>
						</div>
						<div id="KBMSCommentList_${uuid }">
						</div>
					</div>
	    	 	</div>
	    	 	<div role="tabpanel" class="tab-pane" id="KBMSAction_${uuid}">
			    	<div class="box-body">
						<table id="KBMSActionGtid_${uuid}"  style="width: 100%"></table>
					</div>
	    	 	</div>
	    	</div>
    	</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	requirejs(['wiseMen/dataModel/QueryDefTpl'],function(QueryDefTpl){
		var uuid = '${uuid}';
		var grid=new QueryDefTpl({
			code:"KBMS_INFO_ACTION",
			selectModel:'single',
			queryDatas:{ID:"${entity.id }"},
			gridDiv:"#KBMSActionGtid_"+uuid//grid表格
		});
		
		loadKbmsCommentList('-1',1);
	});
	
	$("#commentFormSubmit_${uuid}").click(function(){
		var form = $("#KBMSCommentForm_${uuid}");
		var content = form.find("textarea[name=content]").val();
		if($.trim(content).length>0){
			KbmsCommentSubmit(form.find("input[name=pid]").val(),content,function(data){
				form.find("textarea[name=content]").val("");
				loadKbmsCommentList('-1',1);
			});
		}
	});
});

/**
 * 初始化评论区域
 */
function loadKbmsCommentList(pid,pageNumber){
	$.post(ctx+"/KBMS/Comment/pageList.do",{
		kid:'${entity.id }',
		pid:pid,
		pageSize:5,
		pageNumber:pageNumber
	},function(data){
		if(data.rows.length>0){
			var list = $("#KBMSCommentList_${uuid }");
			list.empty();
			var index = list.find("table[name='mediaItem']").length+1;
			for(var i=0; i<data.rows.length; i++){
				var row = data.rows[i];
				var html = "<table id='{0}' name='mediaItem' border='0' class='table' style='margin-bottom:5px;'><tbody>"+
				   "<tr><td width='70px'><img src='/res/images/user-def.jpg'><h6 class='text-center'>{1}</h6></td><td>{2}</td></tr>"+
				   "<tr><td colspan='2' class='text-right text-muted' style='border-top:none;'>"+
				   	"{3}楼&nbsp;{4}&nbsp;"+
				   	"<a name='replyBtn' href='javascript:showReplyComment(\""+row.id+"\")'>回复{5}</a>"+
				   	"<a name='hideReplyBtn' class='bg-success' style='padding:5px 10px;display:none;' href='javascript:hideReplyComment(\""+row.id+"\")'>收起回复</a>"+
				   	"<div name='ReplyCommentDiv' class='bg-success' style='padding: 20px 20px 5px 20px;display:none;'></div>"+
				   "</td></tr>"+
				   "</tbody></table>";
				list.append(html.format(row.id,row.createUserName,row.contentStr,index,row.createTimeStr,"("+row.children+")"));
				index++;
				if(row.children>0){
					loadKbmsCommentReplyList(row.id);
				}
			}
			if(data.pageCount>1){//有分页，显示分页控件 active
				var html = "<nav class='text-center'><ul class='pagination'>";
				for(var i=1; i<=data.pageCount; i++){
					html += "<li class='{0}'><a href='javascript:loadKbmsCommentList(\"-1\","+i+")'>"+i+"</a></li>";
					if(data.curPage==i){
						html = html.format("active");
					}else{
						html = html.format("");
					}
				}
				html += "</li></ul></nav>";
				if(data.curPage>1){
					$("#KBMSCommentForm_${uuid} textarea[name=content]").focus();
				}
				list.append(html);
			}
		}
	},'json');
}

/**
 * 加载回复评论列表
 */
function loadKbmsCommentReplyList(pid){
	$.post(ctx+"/KBMS/Comment/pageList.do",{
		kid:'${entity.id }',
		pid:pid
	},function(data){
		if(data.rows.length>0){
			var tb = $("#"+pid);
			var com = tb.find("div[name=ReplyCommentDiv]");
			for(var i=0; i<data.rows.length; i++){
				var row = data.rows[i];
				var html = getKbmsCommentReplyItem();
				com.append(html.format(row.createUserName,row.contentStr,row.createTimeStr,pid));
			}
			com.append("<div class='text-right' onclick='showReplyComment(\""+pid+"\")' style='margin:10px 0;'><button type='button' class='btn btn-default'>我也说一句</button></div>");
			tb.find("a[name='replyBtn']").hide();
			tb.find("a[name='hideReplyBtn']").show();
			com.show();
		}
	},'json');
}

function getKbmsCommentReplyItem(){
	return "<div name='replyCMItem' class='media'>"+
	   "<a class='media-left' href='#'><img src='/res/images/user-def-s.jpg'></a>"+
	   "<div class='media-body text-left'><a href='#' name='userName'>{0}：</a>{1}</div>"+
	   "<div class='media-bottom text-right' style='font-size:10px;'>{2}&nbsp;<a href='javascript:showReplyComment(\"{3}\",1)' class='text-muted'>回复</a></div>"+
   "</div>";
}

/**
 * 发表评论
 */
function KbmsCommentSubmit(pid,content,callFun){
	if($.trim(content)==''){
		webUtils.alert("请填写评论内容！");
		return;
	}
	$.post(ctx+"/KBMS/Comment/add.do",{
		kid:'${entity.id}',
		pid:pid,
		content:content
	},function(data){
		webUtils.alert(data.msg);
		if(data.success){
			callFun.call(null,data);
		}
	},'json');
}

/**
 * 发表回复评论
 */
function ReplyCommentSubmit(pid){
	var tb = $("#"+pid);
	var com = tb.find("div[name=ReplyCommentDiv]");
	var content = com.find("textarea[name='content']");
	KbmsCommentSubmit(pid,content.val(),function(data){
	   content.val("");
	   var row = data.obj;
	   var html = getKbmsCommentReplyItem().format(row.createUserName,row.contentStr,row.createTimeStr,pid);
	   var replyList = com.find("div[name='replyCMItem']");
	   if(replyList.length>0){
	        replyList.last().after(html);
	   }else{
		   content.parent().before(html);
		   content.parent().before("<div class='text-right' onclick='showReplyComment(\""+pid+"\")' style='margin:10px 0;'><button type='button' class='btn btn-default'>我也说一句</button></div>");
		   var replyCount = com.find("div[name='replyCMItem']").length;
		   com.find("a[name='replyBtn']").html("回复("+replyCount+")");
	   }
	});
}

/**
 * 展开回复
 */
function showReplyComment(id,code){
	var preWin = $("#KBMSCommentList_${uuid }").find("table[name='mediaItem']").find("td div[name='ReplyCommentDiv'] textarea[name='content']");
	if(preWin.length>0){
		$.each(preWin,function(){
			var preId = $(this).parents("table").attr("id");
			hideReplyComment(preId,1);
		});
	}
	var tb = $("#"+id);
	tb.find("a[name='replyBtn']").hide();
	tb.find("a[name='hideReplyBtn']").show();
	var com = tb.find("div[name='ReplyCommentDiv']");
	var replyContentDiv = com.find("div[name='replyContentDiv']");
	if(replyContentDiv.length==0){
		var html = "<div name='replyContentDiv' class='media'>"+
						"<textarea name='content' style='width: 100%;margin: 0 auto;height: 60px;margin-top: 15px;'></textarea>"+
						"<div><button type='button' onclick='ReplyCommentSubmit(\""+id+"\")' class='btn btn-primary navbar-btn'>发表</button></div>"+
					"</div>";
		com.append(html);
	}else{
		replyContentDiv.show();
	}
	var contentObj = com.find("textarea[name='content']");
	contentObj.val("");
	if(code==1){//回复某条评论的回复
		var userName = com.find("a[name='userName']").html();
		contentObj.val("回复 "+userName);
	}
	com.show();
	contentObj.focus();
}

/**
 * 收起回复
 */
function hideReplyComment(id,i){
	var tb = $("#"+id);
	var com = tb.find("div[name='ReplyCommentDiv']");
	var replyCount = com.find("div[name='replyCMItem']").length;
	if(replyCount>0 && i==1){
		com.find("div[name='replyContentDiv']").hide();
	}else{
		tb.find("a[name='replyBtn']").show();
		tb.find("a[name='hideReplyBtn']").hide();
		com.hide();
		com.find("div[name='replyContentDiv']").hide();
	}
}
/**
 * 加入收藏
 */
function addCollection(kid){
	$.post(ctx+"/KBMS/Collection/add.do",{
		kids:kid
	},function(data){
		webUtils.alert(data.msg);
		if(data.success){
			var a = $("#collectionBtn_${uuid}");
			a.removeClass("glyphicon-star-empty");
			a.addClass("glyphicon-star");
			a.attr("title","点击取消收藏");
			a.attr("href","javascript:removeCollection('"+kid+"');");
		}
	},'json');
}
/**
 * 取消收藏
 */
function removeCollection(kid){
	$.post(ctx+"/KBMS/Collection/remove.do",{
		kids:kid
	},function(data){
		webUtils.alert(data.msg);
		if(data.success){
			var a = $("#collectionBtn_${uuid}");
			a.removeClass("glyphicon-star");
			a.addClass("glyphicon-star-empty");
			a.attr("title","点击加入收藏");
			a.attr("href","javascript:addCollection('"+kid+"');");
		}
	},'json');
}
</script>